<template>
  <div>
    <div class="calendar-top">
      <el-button @click="handleAdd">新增</el-button>
    </div>
    <full-calendar ref="calendar" :events="events" :config="config" locale="en" @event-selected="eventClick" />
    <!--新增界面-->
    <el-dialog :visible.sync="addFormVisible" :close-on-click-modal="false" title="新增" style="z-index:9999">
      <el-form ref="addForm" :rules="addFormRules" :model="addForm" label-width="80px">
        <el-form-item label="类型" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="addForm.state" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期" prop="startDate">
          <el-date-picker v-model="addForm.startDate" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="结束日期" prop="endDate">
          <el-date-picker v-model="addForm.endDate" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title" placeholder="输入学历" />
        </el-form-item>
        <el-form-item label="接收人" prop="receiver">
          <el-input v-model="addForm.receiver" placeholder="输入职位" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="addForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="addLoading" type="primary" @click.native="addSubmit">保存</el-button>
        <el-button @click.native="addFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      addFormVisible: false,
      addLoading: false,
      // 新增界面数据
      addForm: {
        type: '',
        state: '',
        startDate: '',
        endDate: '',
        title: '',
        receiver: '',
        description: ''
      },
      addFormRules: {
        type: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
        state: [{ required: true, message: '请选择事件状态', trigger: 'change' }],
        startDate: [{ type: 'date', required: true, message: '请选择事件的开始日期', trigger: 'change' }],
        endDate: [{ type: 'date', required: true, message: '请选择事件的结束日期', trigger: 'change' }],
        title: [{ required: true, message: '请输入事件标题', trigger: 'blur' }],
        receiver: [{ required: true, message: '请选择事件接收人', trigger: 'change' }],
        description: [{ required: true, message: '请输入你的事件描述', trigger: 'blur' }]
      },
      events: [
        {
          title: 'test',
          resourceId: 'a',
          start: '2019-01-04T12:30:00',
          end: '2019-01-04T15:30:00'
        },
        {
          title: 'test',
          resourceId: 'a2',
          start: '2019-01-04T12:35:00',
          end: '2019-01-04T15:35:00'
        },
        {
          title: 'test',
          resourceId: 'a2',
          start: '2019-01-04T12:35:00',
          end: '2019-01-04T15:35:00'
        },
        {
          title: 'test',
          resourceId: 'a2',
          start: '2019-01-04T12:35:00',
          end: '2019-01-04T15:35:00'
        },
        {
          title: 'test',
          resourceId: 'a2',
          start: '2019-01-04T12:35:00',
          end: '2019-01-04T15:35:00'
        },
        {
          title: 'test',
          resourceId: 'a2',
          start: '2019-01-04T12:35:00',
          end: '2019-01-04T15:35:00'
        },
        {
          title: 'test',
          resourceId: 'a2',
          start: '2019-01-04T12:35:00',
          end: '2019-01-04T15:35:00'
        }
      ],
      config: {
        header: {
          left: 'prev,next,today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listWeek'
        },
        // 限制一天显示的事件数，其余的将出现在一个弹出窗中
        eventLimit: true,
        views: {
          agenda: {
            eventLimit: 6
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'type',
      'state',
      'startDate',
      'endDate',
      'title',
      'receiver',
      'description'
    ])
  },
  methods: {
    // 显示新增界面
    handleAdd: function() {
      this.addFormVisible = true
      this.addForm = {
        type: '',
        state: '',
        startDate: '',
        endDate: '',
        title: '',
        receiver: '',
        description: ''
      }
    },
    addSubmit() {

    },
    renderEvent(event) {
      this.$refs.calendar.$emit('render-event', event)
    },
    eventClick: function(calEvent, jsEvent, view) {
      alert('Event: ' + calEvent.title)
    }
  }
}
</script>

<style scoped>
body .fc{
  margin: 50px
}
.calendar-top{
  margin: 50px;
  margin-bottom: -50px
}
</style>

